<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'App',

  methods: {
    ...mapActions('cache', ['addCache', 'removeCache']),
    // 收集缓存（通过监听）
    collectCaches() {
      // 收集当前路由相关的缓存
      this.$route.matched.forEach((routeMatch) => {
        const instance = routeMatch.components?.default;
        const componentName = instance?.name;

        if (process.env.NODE_ENV === 'development') {
          this.checkRouteComponentName(componentName, instance?.__file);
        }

        // 配置了meta.keepAlive的路由组件添加到缓存
        if (routeMatch.meta.keepAlive) {
          if (!componentName) {
            console.warn(`${routeMatch.path} 路由的组件名称name为空`);
            return;
          }
          this.addCache(componentName);
        } else {
          this.removeCache(componentName);
        }
      });
    },
    // 检测路由组件名称是否重复（组件重名会缓存到不该缓存的组件，而且不容易排查问题，所以开发环境时检测重名）
    checkRouteComponentName(name, file) {
      if (!this.cmpNames) this.cmpNames = {};
      if (this.cmpNames[name]) {
        if (this.cmpNames[name] !== file) {
          console.warn(
            `${file} 与${this.cmpNames[name]} 组件名称重复： ${name}`,
          );
        }
      } else {
        this.cmpNames[name] = file;
      }
    },
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler() {
        this.collectCaches();
      },
    },
  },
};
</script>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  /* //background: rgb(236, 245, 255); */
  /* background-color: #f5f5f5; */
  background-image: linear-gradient(rgb(217, 236, 255), rgb(83, 168, 255));
  height: 100vh;
  width: 100vw;
}
.div-background {
  background-color: white;
}
html,
body {
  display: block;
  height: 100vh;
  width: 100vw;
  margin: 0;
}
* {
  margin: 0;

  padding: 0;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
  display: none;
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  /* background: #99a9bf;
  border-radius: 20px; */
  border: 1px solid rgba(0, 0, 0, 0);
  height: 6px;
  border-radius: 20px;
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-track {
  background: #d3dce6;
}

::-webkit-scrollbar-thumb:hover {
  border: 2px solid rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0.7);
}

.el-table_body-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.el-table_body-wrapper::-webkit-scrollbar-thumb {
  background: #99a9bf;
  border-radius: 20px;
}
.el-message {
  font-size: 1.1em;
  border-radius: 25px;
}
.myTooltip {
  max-width: 30% !important;
  padding-bottom: 5px !important;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
</style>
